<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>YuStorage 测试</title>
    <style>
        body { font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto; padding: 20px; }
        .test { margin: 10px 0; padding: 10px; border: 1px solid #ddd; border-radius: 5px; }
        .success { background: #d4edda; border-color: #c3e6cb; }
        .error { background: #f8d7da; border-color: #f5c6cb; }
        button { margin: 5px; padding: 8px 16px; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; }
    </style>
</head>
<body>
    <h1>YuStorage 功能测试</h1>
    <div id="results"></div>
    <button onclick="runTests()">运行测试</button>

    <!-- 引入 UMD 版本的 yu-storage -->
    <script src="./dist/yu-storage.umd.js?v=6"></script>
    
    <script>
        async function runTests() {
            const results = document.getElementById('results');
            results.innerHTML = '';

            // 获取 yuStorage 实例
            const yuStorage = YuStorage.default;

            const tests = [
                {
                    name: 'localStorage 测试',
                    test: () => {
                        yuStorage.set('test-local', 'localStorage数据');
                        const value = yuStorage.get('test-local');
                        return value === 'localStorage数据';
                    }
                },
                {
                    name: 'sessionStorage 测试',
                    test: () => {
                        yuStorage.set('test-session', 'sessionStorage数据', { type: 'session' });
                        const value = yuStorage.get('test-session', { type: 'session' });
                        return value === 'sessionStorage数据';
                    }
                },
                {
                    name: 'Cookie 测试',
                    test: () => {
                        yuStorage.set('test-cookie', 'cookie数据', { type: 'cookie' });
                        const value = yuStorage.get('test-cookie', { type: 'cookie' });
                        return value === 'cookie数据';
                    }
                },
                {
                    name: 'IndexedDB 测试',
                    test: async () => {
                        await yuStorage.set('test-db', 'indexeddb数据', { type: 'indexeddb' });
                        const value = await yuStorage.get('test-db', { type: 'indexeddb' });
                        return value === 'indexeddb数据';
                    }
                },
                {
                    name: '存储可用性检查',
                    test: () => {
                        const availableTypes = yuStorage.getAvailableTypes();
                        return availableTypes.length > 0;
                    }
                }
            ];

            for (const test of tests) {
                try {
                    const result = await test.test();
                    const div = document.createElement('div');
                    div.className = `test ${result ? 'success' : 'error'}`;
                    div.textContent = `${test.name}: ${result ? '通过' : '失败'}`;
                    results.appendChild(div);
                } catch (error) {
                    const div = document.createElement('div');
                    div.className = 'test error';
                    div.textContent = `${test.name}: 错误 - ${error.message}`;
                    results.appendChild(div);
                }
            }
        }
    </script>
</body>
</html>
